<template>
  <div>
    <el-dialog
      title="学生资料"
      :visible.sync="bigPopup"
      @open='open'
      :before-close="editCancelClick"
      width="70%" >
        <div style="margin-bottom: 40px;" >
        
          <el-tabs v-model="activeName" type="card"   >
            <el-tab-pane label="基本信息" name="first" >
              <div class="horizontalBar" >
                <span style="color: red;" >*</span><span>学生姓名：</span>
                <input type="text" v-model="editArr.studentNameVal" />
                <span style="color: red; margin-left: 30px; " >*</span><span>所属学段：</span>
                <el-select v-model="editArr.studentshoolVal" placeholder="请选择" @change="ChangedD" class="elSelect" style="margin-right: 30px;" :disabled="editorBlockedData" >
                  <el-option
                    v-for="(val, index) in learningSectionDataArr"
                    :key="index"
                    :label="val.name"
                    :value="val.id">
                  </el-option>
                </el-select>
                <span style="color: red;" >*</span><span>入学学级：</span>
                <el-select v-model="editArr.studentSessionVal" @change="gradeChangeEntrance" placeholder="请先选择所属学段" class="elSelect" :disabled="judgingHistory" style="margin-right: 40px;" >
                  <el-option
                    v-for="item in sessionDataArr"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
                <span style="color: red;" >*</span><span>所在年级：</span>
                <el-select v-model="editArr.gradeIdDataVal" placeholder="请选择" class="elSelect" style="margin-right: 30px;" disabled >
                  <el-option
                    v-for="(val, index) in gradeIdData"
                    :key="index"
                    :label="val.name"
                    :value="val.id">
                  </el-option>
                </el-select>
                <span style="color: red;" >*</span><span>所在班级：</span>
                <el-select v-model="editArr.studentClassVal" placeholder="请选择" class="elSelect" style="margin-right: 0;" :disabled="editorBlockedData" >
                  <el-option
                    v-for="(val, index) in classDataArr"
                    :key="index"
                    :label="val.grade.name + val.name"
                    :value="val.id">
                  </el-option>
                </el-select>
              </div>
              <div class="horizontalBar" >
                <span>登录名：</span>
                <input type="text" v-model="editArr.signName" disabled />
                <span style="color: red; margin-left: 30px; " >*</span><span>性别：&emsp;</span>
                <el-select v-model="editArr.studentGenderVal" placeholder="请选择" class="elSelect" style="margin-right: 30px;" >
                  <el-option
                    v-for="item in genderDataArr"
                    :key="item.id"
                    :label="item.name"
                    :value="item.data">
                  </el-option>
                </el-select>
                <span>入学年月：</span>
                <el-date-picker class="elSelect"
                  style="margin-right: 40px;"
                  v-model="editArr.studentDateVal"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="month"
                  placeholder="选择月">
                </el-date-picker>
                <span>家庭住址：</span>
                <input type="text" v-model="editArr.studentAddressVal" style="width: 300px;" />
              </div>
              <div class="horizontalBar" >
                <span>证件类型：</span>
                <el-select v-model="editArr.studentDocumentTypeVal" placeholder="请选择" class="elSelect" style="margin-right: 30px;" >
                  <el-option
                    v-for="(val, index) in documentTypeDataArr"
                    :key="index"
                    :label="val.valName"
                    :value="val.valCode">
                  </el-option>
                </el-select>
                <span>证件号：</span>
                <input type="text" v-model="editArr.studentDocumentVal" style="width: 150px; " />
                <span style="margin-left: 30px;" >学籍号：</span>
                <input type="text" v-model="editArr.studentLearnVal" style="width: 200px;" />
                <span style="margin-left: 30px;" >学籍状态：</span>
                <span v-for="(val, index) in learningState" :key="index" v-if="val.id == editArr.studentStatusValue"  style="margin-right: 10px;" >{{val.name}}</span>
                <img src="@/assets/images/sf.png" mode="" v-if="judgingHistory"  class="imgCss" @click="details = true" >
              </div>
              <!-- <div class="horizontalBar" >
                <span>备注信息：</span>
                <input type="text" v-model="editArr.studentRemarksVal" style="width: 400px;" />
                <span style="margin-left: 40px;" >毕业至：&emsp;</span>
                <input type="text" v-model="editArr.studentGraduationVal" disabled="true" style="width: 300px; "  />
              </div> -->
              <div class="horizontalBar" style="height: 20px; margin: 20px 0 10px 0; font-size: 15px; " ><span>家长信息：</span></div>
              <div style="overflow-y:scroll; " >
                <div class="horizontalBar" style="height: 50px; " v-for="(val, index) in editArr.familyMembersArr" :key="index"  >
                  <div style="display: flex; align-items: center; " >
                    <input type="text" v-model="val.name" style="margin: 0 20px 0 0" placeholder="家属姓名" >
                    <el-select v-model="val.relationCode" placeholder="亲属关系" class="elSelect" style="margin-right: 25px;" >
                      <el-option
                        v-for="(val, index) in relativesDataArr"
                        :key="index"
                        :label="val.valName"
                        :value="val.valCode">
                      </el-option>
                    </el-select>
                    <!-- @blur="phoneInput(val)" -->
                    <input type="text" v-model="val.phone" style="margin: 0 20px 0 0" placeholder="手机号码" >
                    <span class="textCss" @click="deleteFamilyClick(index)" >删除</span>
                    <span class="textCss" @click="unbindClick(val.userId)" v-if="val.id" >解除微信绑定</span>
                  </div>
                </div>
                <div class="horizontalBar" >
                  <span class="textCss" @click="addFamilyClick" >+ 添加家长</span>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="个人信息" name="second">
              <div class="horizontalBar" >
                <span>姓名拼音：</span>
                <input type="text" v-model="editArr.namePinYin" />
                <span class="marginLeft" >学籍辅号：</span>
                <input type="text" v-model="editArr.auxiliaryNumber" />
                <span class="marginLeft" >学号：</span>
                <input type="text" v-model="editArr.studentNumber" />
                <span class="marginLeft" >政治面貌：</span>
                <el-select v-model="editArr.politicalOutlook" placeholder="请选择" class="elSelect" >
                  <el-option
                    v-for="(val, index) in politicalOutlookDataArr"
                    :key="index"
                    :label="val.valName"
                    :value="val.valCode">
                  </el-option>
                </el-select>
                <span>邮政编码：</span>
                <input type="text" v-model="editArr.postalCode" />
              </div>
              <div class="horizontalBar" >
                <span>籍贯：&emsp;&emsp;</span>
                <input type="text" v-model="editArr.nativePlace" />
                <span class="marginLeft" >出生年月：</span>
                <el-date-picker class="elSelect"
                  style="margin-right: 31px;"
                  v-model="editArr.dateOfBirth"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="month"
                  placeholder="选择月">
                </el-date-picker>
                <span>出生地：&emsp;</span>
                <input type="text" v-model="editArr.birthplace" />
                <span class="marginLeft" >民族：</span>
                <el-select style="margin-right: 31px;" v-model="editArr.nameMingZu" placeholder="请选择" class="elSelect" >
                  <el-option
                    v-for="(val, index) in nationDataArr"
                    :key="index"
                    :label="val.valName"
                    :value="val.valCode">
                  </el-option>
                </el-select>
                <span>国籍/地区：</span>
                <input type="text" v-model="editArr.nationality" />
              </div>

              <div class="horizontalBar" >
                <span>健康状况：</span>
                <el-select v-model="editArr.health" placeholder="请选择" class="elSelect" style="margin-right: 30px;" >
                  <el-option
                    v-for="(val, index) in healthyDataArr"
                    :key="index"
                    :label="val.valName"
                    :value="val.valCode">
                  </el-option>
                </el-select>
                <span>入学方式：</span>
                <el-select v-model="editArr.admissionMode" placeholder="请选择" class="elSelect" style="margin-right: 30px;" >
                  <el-option
                    v-for="(val, index) in entranceDataArr"
                    :key="index"
                    :label="val.valName"
                    :value="val.valCode">
                  </el-option>
                </el-select>
                <span>户口所在地：</span>
                <input type="text" v-model="editArr.registeredResidence" />
                <span style="margin-left: 40px;" >户口性质：</span>
                <el-select v-model="editArr.hKNature" placeholder="请选择" class="elSelect" style="margin-right: 20px;" >
                  <el-option
                    v-for="(val, index) in residenceTypeDataArr"
                    :key="index"
                    :label="val.valName"
                    :value="val.valCode">
                  </el-option>
                </el-select>
              </div>
              <div class="horizontalBar" >
                <span>现居住地：</span>
                <input type="text" v-model="editArr.currentResidence" style="width: 250px;" />
                <span class="marginLeft" >通讯地址：</span>
                <input type="text" v-model="editArr.postalAddress" style="width: 250px;" />
                <span class="marginLeft" >个人主页地址：</span>
                <input type="text" v-model="editArr.personalHomepage" style="width: 250px;" />
              </div>
              <div class="horizontalBar" >
                <span>联系电话：</span>
                <input type="text" v-model="editArr.contactNumberData" style="width: 250px;" />
                <span class="marginLeft" >电子邮箱：</span>
                <input type="text" v-model="editArr.mailBox" style="width: 250px;" />
                <span class="marginLeft" >特长：</span>
                <input type="text" v-model="editArr.specialtyData" style="width: 400px;" />
              </div>
              <div class="horizontalBar" >
                <span>身份证有效起始/截止日期：</span>
                <el-date-picker
                  value-format="yyyy-MM-dd HH:mm:ss"
                  v-model="editArr.theCertificateIsValid"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
                <span class="marginLeft" >是否为港澳台侨外：</span>
                <el-select v-model="editArr.oCCompatriots" placeholder="请选择" class="elSelect" style="margin-right: 20px;" >
                  <el-option
                    v-for="(val, index) in oCCompatriotsDataArr"
                    :key="index"
                    :label="val.valName"
                    :value="val.valCode">
                  </el-option>
                </el-select>
              </div>
              <!-- <div class="horizontalBar" ></div> -->
            </el-tab-pane>
            <el-tab-pane label="拓展信息" name="third">
              <div class="horizontalBar" >
                <span>学生来源：</span>
                <el-select v-model="editArr.sourceOfStudents" placeholder="请选择" class="elSelect" >
                  <el-option
                    v-for="(val, index) in admissionModeDataArr"
                    :key="index"
                    :label="val.valName"
                    :value="val.valCode">
                  </el-option>
                </el-select>
                <span>就读方式：</span>
                <el-select v-model="editArr.modeOfStudy" placeholder="请选择" class="elSelect" >
                  <el-option
                    v-for="(val, index) in modeOfStudyDataArr"
                    :key="index"
                    :label="val.valName"
                    :value="val.valCode">
                  </el-option>
                </el-select>
                <span>曾用名：&emsp;</span>
                <input type="text" v-model="editArr.nameUsedBefore" />
                <span class="marginLeft" >是否为独生子女：</span>
                <el-radio v-model="editArr.onlyChild" :label="true"  style="margin: 0 20px 0 15px;" >是</el-radio>
                <el-radio v-model="editArr.onlyChild" :label="false">否</el-radio>
              </div>
              <div class="horizontalBar" >
                <span>是否接受过学前教育：</span>
                <el-radio v-model="editArr.preschoolEducation" :label="true"  style="margin: 0 20px 0 15px;" >是</el-radio>
                <el-radio v-model="editArr.preschoolEducation" :label="false">否</el-radio>
                <span style="margin-left: 30px;" >是否为留守儿童：</span>
                <el-radio v-model="editArr.behindChildren" :label="true"  style="margin: 0 20px 0 15px;" >是</el-radio>
                <el-radio v-model="editArr.behindChildren" :label="false">否</el-radio>
                <span style="margin-left: 30px;" >是否为进城务工人员随迁子女：</span>
                <el-radio v-model="editArr.accompanyingChildren" :label="true"  style="margin: 0 20px 0 15px;" >是</el-radio>
                <el-radio v-model="editArr.accompanyingChildren" :label="false">否</el-radio>
                <span style="margin-left: 30px;" >是否为孤儿：</span>
                <el-radio v-model="editArr.orphanData" :label="true"  style="margin: 0 20px 0 15px;" >是</el-radio>
                <el-radio v-model="editArr.orphanData" :label="false">否</el-radio>
              </div>
              <div class="horizontalBar" >
                <span>是否为烈士或优抚子女：</span>
                <el-radio v-model="editArr.martyrData" :label="true"  style="margin: 0 20px 0 15px;" >是</el-radio>
                <el-radio v-model="editArr.martyrData" :label="false">否</el-radio>
                <span style="margin-left: 30px;" >是否为政府购买学位：</span>
                <el-radio v-model="editArr.governmentPurchases" :label="true"  style="margin: 0 20px 0 15px;" >是</el-radio>
                <el-radio v-model="editArr.governmentPurchases" :label="false">否</el-radio>
                <span style="margin-left: 30px;" >是否需要申请资助：</span>
                <el-radio v-model="editArr.applyForFunding" :label="true"  style="margin: 0 20px 0 15px;" >是</el-radio>
                <el-radio v-model="editArr.applyForFunding" :label="false">否</el-radio>
                <span style="margin-left: 30px;" >是否享受一补：</span>
                <el-radio v-model="editArr.aSupplement" :label="true"  style="margin: 0 20px 0 15px;" >是</el-radio>
                <el-radio v-model="editArr.aSupplement" :label="false">否</el-radio>
              </div>
              <div class="horizontalBar" >
                <span>残疾类型：</span>
                <el-select v-model="editArr.typesOfDisability" placeholder="请选择" class="elSelect" >
                  <el-option
                    v-for="(val, index) in disabilityTypeDataArr"
                    :key="index"
                    :label="val.valName"
                    :value="val.valCode">
                  </el-option>
                </el-select>
                <span>残疾人随班就读类型：</span>
                <el-select v-model="editArr.onDuty" placeholder="请选择" class="elSelect" >
                  <el-option
                    v-for="(val, index) in onDutyDataArr"
                    :key="index"
                    :label="val.valName"
                    :value="val.valCode">
                  </el-option>
                </el-select>
                <span>上下学距离（公里）：</span>
                <input type="number" v-model="editArr.distanceData" />
                <span class="marginLeft" >上下学交通方式：</span>
                <el-select v-model="editArr.modeOfTransportation" placeholder="请选择" class="elSelect" >
                  <el-option
                    v-for="(val, index) in modeOfTransportationDataArr"
                    :key="index"
                    :label="val.valName"
                    :value="val.valCode">
                  </el-option>
                </el-select>
              </div>
              <div class="horizontalBar" >
                <span>是否需要乘坐校车：</span>
                <el-radio v-model="editArr.schoolBus" :label="true"  style="margin: 0 20px 0 15px;" >是</el-radio>
                <el-radio v-model="editArr.schoolBus" :label="false">否</el-radio>
                <span class="marginLeft" >是否已毕业：</span>
                <el-radio v-model="editArr.graduationData" disabled  :label="true"  style="margin: 0 20px 0 15px;" >是</el-radio>
                <el-radio v-model="editArr.graduationData" disabled  :label="false">否</el-radio>
              </div>
              <div class="horizontalBar" style="height: 110px;" >
                <span style="margin-right: 30px;" >上传头像：</span>
                <el-button type="primary" @click='selectFile'>选择文件</el-button>
                <input ref='headFile' type='file' @change="changeFile" style="display: none;"/>
                <div calss="imgDivCss" style="width: 100px; height: 100px; border-radius: 10px; border: 1px solid #C1CBD0; margin-left: 20px; "  >
                  <img :src="editArr.dialogImageUrl" alt="" style="width: 100%; height: 100%;" >
                </div>
                <el-dialog :visible.sync="editArr.dialogVisibless">
                  <img width="100%" :src="editArr.dialogImageUrl" alt="">
                </el-dialog>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>

        <span slot="footer" class="dialog-footer" >
          <el-button @click="editCancelClick">取 消</el-button>
          <el-button type="primary" @click="editConfirmationClick">确 定</el-button>
        </span>
    </el-dialog>
    <!-- 在籍状态历史详情  —————————————————————————————————————————————————— -->
    <el-dialog
      :title="'历史变动详情： ' + this.individualStudent.name"
      :visible.sync="details"
      width="50%">
      <el-table
        :data="tableData"
        style="width: 100%; border: 1px solid #C1CBD0; background: #C1CBD0; ">
        <el-table-column
          align='center'
          type="index"
          label="序号"
          width="50">
        </el-table-column>
        <el-table-column
          align='center'
          :formatter="stateFormat"
          prop="type"
          label="学籍类型"
          width="70">
        </el-table-column>
        <el-table-column
          align='center'
          prop="creationTime"
          label="变动日期"
          width="150">
        </el-table-column>
        <el-table-column
          align='center'
          prop="target"
          label="变动去向"
          width="70">
        </el-table-column>
        <el-table-column
          align='center'
          prop="stageName"
          label="学段"
          width="70">
        </el-table-column>
        <el-table-column
          align='center'
          prop="className"
          label="班级"
          width="100">
        </el-table-column>
        <el-table-column
          align='center'
          prop="reason"
          label="原因/备注">
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 20px; text-align: right; "
        @current-change="pageChange"
        :current-page="pagingData.pageNum"
        :page-sizes="[10]"
        :page-size="pagingData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagingData.pageAllNum">
      </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="details = false">关闭</el-button>
        
      </span>
     
    </el-dialog>
  </div>
</template>

<script>
import { mapActions, mapState, mapGetters, mapMutations } from 'vuex'
import {importStudentData, readStudent} from '@/util/map'
import edit from './editAdd'
import COS from '@/util/COS'
import {baseUrl} from '@/config/config'
export default {
  props: {
    bigPopup: ''
  },
  data () {
    return {
      // 判断是否展现历史学籍变动列表
      judgingHistory: false,
      // 学籍详情切换标识
      details: false,
      // 删除 && 学籍变动学生的资料 （暂存）
      deletePersonalData: '',
      // 新增，编辑框弹窗标识  && 记录用户是新增还是编辑弹出的窗
      activeName: 'first',
      // 判断用户点的确定是新增还是编辑
      judgeNew: 1,
      // 新增，编辑弹窗年级&&班级&&学段 选择框封死
      editorBlockedData: false,
      // 学生资料
      // 姓名：studentNameVal，年级：gradeIdDataVal，  班级：studentClassVal，学籍号：studentLearnVal， 性别：studentGenderVal， 所属学段：studentshoolVal
      // 证件类型：studentDocumentTypeVal， 证件号：studentDocumentVal， 家庭住址：studentAddressVal，学籍：studentSessionVal，入学年月：studentDateVal
      // 学籍状态：studentStatusValue，备注信息：studentRemarksVal，毕业学校：studentGraduationVal，家长信息：familyMembersArr，姓名拼音: namePinYin
      // 学籍辅号：auxiliaryNumber，学号：studentNumber，登录名：signName，籍贯：nativePlace，出生年月：dateOfBirth，出生地：birthplace，民族：nameMingZu，
      // 国籍/地区：nationality，证件有效期：theCertificateIsValid，是否为港澳台侨外：oCCompatriots，政治面貌：politicalOutlook，健康状况：health，入学方式：admissionMode，
      // 户口所在地：registeredResidence，户口性质：hKNature，邮政编码：postalCode，现居住地：currentResidence，通讯地址：postalAddress，个人主页地址：personalHomepage，
      // 联系电话：contactNumberData，电子邮箱：mailBox，特长：specialtyData, 学生来源：sourceOfStudents，就读方式：modeOfStudy，曾用名：nameUsedBefore，
      // 是否为独生子女：onlyChild，是否接受过学前教育：preschoolEducation，是否为留守儿童：behindChildren，是否为进城务工人员随迁子女：accompanyingChildren，
      // 是否为孤儿：orphanData，是否为烈士或优抚子女：martyrData，是否为政府购买学位：governmentPurchases，是否需要申请资助：applyForFunding，是否享受一补：aSupplement
      // 残疾类型：typesOfDisability，残疾人随班就读类型：onDuty，上下学距离：distanceData，上下学交通方式：modeOfTransportation，是否需要乘坐校车：schoolBus，
      // 是否已毕业：graduationData
      editArr: {
        studentNameVal: '',
        gradeIdDataVal: '',
        studentClassVal: '',
        studentLearnVal: '',
        studentGenderVal: '',
        studentshoolVal: '',
        studentDocumentTypeVal: '',
        studentDocumentVal: '',
        studentAddressVal: '',
        studentSessionVal: '',
        studentDateVal: '',
        studentStatusValue: 1,
        studentRemarksVal: '',
        studentGraduationVal: '',
        familyMembersArr: [
          { id: '', name: '', relationCode: '', phone: '', userId: '' }
        ],
        //  个人信息
        namePinYin: '',
        auxiliaryNumber: '',
        studentNumber: '',
        signName: '',
        nativePlace: '',
        dateOfBirth: '',
        birthplace: '',
        nameMingZu: '',
        nationality: '',
        theCertificateIsValid: [],
        oCCompatriots: '',
        politicalOutlook: '',
        health: '',
        admissionMode: '',
        registeredResidence: '',
        hKNature: '',
        postalCode: '',
        currentResidence: '',
        postalAddress: '',
        personalHomepage: '',
        contactNumberData: '',
        mailBox: '',
        specialtyData: '',
        // 拓展信息
        sourceOfStudents: '',
        modeOfStudy: '',
        nameUsedBefore: '',
        onlyChild: '',
        preschoolEducation: '',
        behindChildren: '',
        accompanyingChildren: '',
        orphanData: '',
        martyrData: '',
        governmentPurchases: '',
        applyForFunding: '',
        aSupplement: '',
        typesOfDisability: '',
        onDuty: '',
        distanceData: '',
        modeOfTransportation: '',
        schoolBus: '',
        graduationData: '',
        // 上传头像
        dialogImageUrl: ''
      },
      // 年级数组
      gradeIdData: [],
      // 班级数组
      classDataArr: [],
      // 学级数组
      sessionDataArr: [],
      // 学段数组
      learningSectionDataArr: [],
      // 历史变动记录数组
      tableData: [],
      // 学籍变动中所有变动类型
      allTypeChange: [
        {id: 1, name: '分班'}, {id: 2, name: '转班'}, {id: 3, name: '转学'}, {id: 4, name: '退学'},
        {id: 5, name: '休学'}, {id: 6, name: '开除'}, {id: 7, name: '跳级'}, {id: 8, name: '留级'}, {id: 9, name: '复学'}
      ],
      // 学籍状态
      learningState: [
        {id: 99, name: '全部'}, {id: 1, name: '在籍'}, {id: 2, name: '毕业'}, {id: 3, name: '休学'},
        {id: 4, name: '退学'}, {id: 5, name: '开除'}, {id: 6, name: '转学'}
      ],
      // 性别数组
      genderDataArr: [
        {id: 1, name: '男', data: true}, {id: 2, name: '女', data: false}
      ],
      // 证件类型数组
      documentTypeDataArr: [],
      // 港澳台侨外数组
      oCCompatriotsDataArr: [],
      // 民族枚举数组
      nationDataArr: [],
      // 健康状态枚举数组
      healthyDataArr: [],
      // 入学方式枚举数组
      entranceDataArr: [],
      // 户口性质枚举数组
      residenceTypeDataArr: [],
      // 政治面貌枚举数组
      politicalOutlookDataArr: [],
      // 学生来源枚举数组
      admissionModeDataArr: [],
      // 就读方式枚举数组
      modeOfStudyDataArr: [],
      // 残疾类型枚举数组
      disabilityTypeDataArr: [],
      // 残疾人随班就读类型枚举数组
      onDutyDataArr: [],
      // 上下学交通方式
      modeOfTransportationDataArr: [],
      // 亲属关系枚举数组
      relativesDataArr: [],
      value: '',
      // 分页  当前页，每页条数，总条数
      pagingData: {
        pageNum: 1,
        pageSize: 10,
        pageAllNum: 0
      }
    }
  },
  computed: {
    ...mapState({
      cookiesObj: state => state.common.cookiesObj,
      oCCompatriotsDataArrS: state => state.studentList.oCCompatriotsDataArrS,
      individualStudent: state => state.studentList.individualStudent,
      documentTypeDataArrS: state => state.studentList.documentTypeDataArrS,
      nationDataArrS: state => state.studentList.nationDataArrS,
      healthyDataArrS: state => state.studentList.healthyDataArrS,
      entranceDataArrS: state => state.studentList.entranceDataArrS,
      residenceTypeDataArrS: state => state.studentList.residenceTypeDataArrS,
      politicalOutlookDataArrS: state => state.studentList.politicalOutlookDataArrS,
      admissionModeDataArrS: state => state.studentList.admissionModeDataArrS,
      modeOfStudyDataArrS: state => state.studentList.modeOfStudyDataArrS,
      disabilityTypeDataArrS: state => state.studentList.disabilityTypeDataArrS,
      onDutyDataArrS: state => state.studentList.onDutyDataArrS,
      modeOfTransportationDataArrS: state => state.studentList.modeOfTransportationDataArrS,
      relativesDataArrS: state => state.studentList.relativesDataArrS
    }),
    schoolId () {
      return this.$store.state.common.cookiesObj.schoolId
    },
    schoolName () {
      return this.$store.state.common.cookiesObj.schoolName
    },
    individualStudentObj () {
      return this.$store.state.studentList.individualStudent
    }
  },
  methods: {
    ...mapActions({
      getStudentList: 'studentList/getStudentList',
      addStudentApi: 'studentList/addStudentApi',
      addLearnApi: 'studentList/addLearnApi',
      toUpdateApi: 'studentList/toUpdateApi',
      newStudentsApi: 'studentList/newStudentsApi',
      allSectionsApi: 'studentList/allSectionsApi',
      monitorApi: 'studentList/monitorApi',
      getAllGradeApi: 'studentList/getAllGradeApi',
      changeRecordApi: 'studentList/changeRecordApi',
      handleRelativesApi: 'studentList/handleRelativesApi',
      unbindApi: 'studentList/unbindApi',
      correspondingGradeApi: 'studentList/correspondingGradeApi'
    }),
    ...mapMutations({
      individualStudentMut: 'studentList/individualStudentMut'
    }),
    getSchoolId () {
        if (this.schoolId) {
          return this.schoolId
        } else {
          return this.individualStudentObj.schoolId
        }
    },
    async uploadFile () {
      var fileList = this.$refs.inputFile.files
      for (let file of fileList) {
          var list = await readStudent({file: file, fileId: Math.random() + ''})

           try {
              while (true) {
                  var temp = list.splice(0, 20)
                  if (temp.length > 0) {
                      await importStudentData({list: temp, schoolId: this.getSchoolId()})
                  } else {
                      break
                  }
              }
          } catch (error) {
              this.$message.error(error.data.error.message)
          }
      }
      this.$refs.inputFile.value = ''
    },
    // 点击编辑弹窗的确定按钮触发事件
    editConfirmationClick () {
      let val = this.editArr

      if (!val.studentNameVal) {
        this.$message.error('请输入学生姓名')
        return
      }
      if (!/[\u4E00-\u9FA5]/g.test(val.studentNameVal) || val.studentNameVal.length > 11) {
        this.$message.error('学生姓名只允许输入汉字，长度为11个字符')
        return
      }
      if (val.studentGenderVal !== true && val.studentGenderVal !== false) {
        this.$message.error('请输入学生性别')
        return
      }
      if (!val.studentSessionVal) {
        this.$message.error('请输入学生入学学级')
        return
      }
      if (!val.gradeIdDataVal) {
        this.$message.error('请选择学生入学年级')
        return
      }
      if (!val.studentClassVal) {
        this.$message.error('请选择学生所在班级')
        return
      }
      if (val.studentDocumentVal) {
        if (!val.studentDocumentTypeVal) {
          this.$message.error('请选择证件类型')
          return
        }
      }
      for (let i = val.familyMembersArr.length - 1; i >= 0; i--) {
        console.log(val.familyMembersArr)
        if (val.familyMembersArr[i].name == '' && val.familyMembersArr[i].phone == '' && val.familyMembersArr[i].relationCode == '') {
          val.familyMembersArr.splice(i, 1)
        }
      }
      for (let k of val.familyMembersArr) {
        if (k.name && k.phone && k.relationCode) {
          if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(k.phone))) {
            k.phone = ''
            this.$message.error('手机号码格式错误，请重新输入')
            return
          }
        } else {
          this.$message.error('请完整填写家长信息')
          return
        }
      }

      if (val.contactNumberData && !(/^1(3|4|5|6|7|8|9)\d{9}$/.test(val.contactNumberData)) && !/^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/.test(val.contactNumberData)) {
        this.$message.error('联系电话格式有误')
        return
      }
      // eslint-disable-next-line
      if (val.mailBox && !(/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(val.mailBox))) {
        this.$message.error('电子邮箱格式有误')
        return
      }
      if (val.auxiliaryNumber && (/[^a-zA-Z0-9]/g.test(val.auxiliaryNumber))) {
        this.$message.error('学籍辅号格式有误')
        return
      }
      if (val.studentNumber && (/[^a-zA-Z0-9]/g.test(val.studentNumber))) {
        this.$message.error('学号格式有误')
        return
      }
      if (val.distanceData && val.distanceData < 0) {
        this.$message.error('上学放学距离不能为负数')
        return
      }

       let params = {
          id: this.deletePersonalData.id,
          data: {
            schoolId: this.getSchoolId(),
            loginUserId: this.deletePersonalData.loginUserId,
            name: val.studentNameVal,
            gender: val.studentGenderVal,
            // schoolName: val.studentshoolVal,
            idNumber: val.studentDocumentVal,
            studentCode: val.studentLearnVal,
            status: val.studentStatusValue,
            classId: val.studentClassVal,
            // 亲属数组未完善
            parentList: val.familyMembersArr,
            schoolPeriodId: val.studentSessionVal,
            familyAddress: val.studentAddressVal,
            enrolmentDate: val.studentDateVal,
            idTypeCode: val.studentDocumentTypeVal,
            // 个人信息
            namePingYin: val.namePinYin,
            auxStudentCode: val.auxiliaryNumber,
            studentNum: val.studentNumber,
            politicalStatusCode: val.politicalOutlook,
            loginName: val.signName,
            nativePlace: val.nativePlace,
            birthDate: val.dateOfBirth,
            birthPlace: val.birthplace,
            nationCode: val.nameMingZu,
            nationality: val.nationality,
            healthStatusCode: val.health,
            enrolmentModeCode: val.admissionMode,
            householdRegPlace: val.registeredResidence,
            householdRegTypeCode: val.hKNature,
            postalCode: val.postalCode,
            residentAddress: val.currentResidence,
            commAddress: val.postalAddress,
            homePageUrl: val.personalHomepage,
            contactPhoneNum: val.contactNumberData,
            email: val.mailBox,
            specialSkill: val.specialtyData,
            idValidBeginDate: val.theCertificateIsValid[0],
            idValidEndDate: val.theCertificateIsValid[1],
            alienCode: val.oCCompatriots,
            // 拓展信息
            studentSourceCode: val.sourceOfStudents,
            studyModeCode: val.modeOfStudy,
            formerName: val.nameUsedBefore,
            onlyChildFlag: val.onlyChild,
            preschoolEduFlag: val.preschoolEducation,
            leftBehindChildFlag: val.behindChildren,
            migrantChildFlag: val.accompanyingChildren,
            orphanFlag: val.orphanData,
            martyrFlag: val.martyrData,
            govPayTuitionFlag: val.governmentPurchases,
            applyGovAidFlag: val.applyForFunding,
            subsidyFlag: val.aSupplement,
            disabilityTypeCode: val.typesOfDisability,
            followStudyTypeCode: val.onDuty,
            schoolDistance: val.distanceData,
            transportModeCode: val.modeOfTransportation,
            takeSchoolbusFlag: val.schoolBus,
            graduateFlag: val.graduationData,
            portraitImgUrl: val.dialogImageUrl
          }
        }
        let handleParams = {
          id: this.deletePersonalData.id,
          data: this.editArr.familyMembersArr
        }
      if (this.judgeNew == 1) {
        this.newStudentsApi(params).then(res => {
          this.allStudentData()
          this.$emit('changeBigPopup', false)
          this.deletePersonalData = ''
          this.$message({
              message: '学生新增成功',
              type: 'success'
          })
          this.individualStudentMut('')
          console.log(res)
          
          handleParams.id = res.data.id
          if (handleParams.data.length > 0) {
             this.handleRelativesApi(handleParams).then(res => {
              console.log(res)
            })
          }
        })
      } else {
        this.toUpdateApi(params).then(res => {
          this.allStudentData()
          this.$emit('changeBigPopup', false)
          this.deletePersonalData = ''
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.individualStudentMut('')
          console.log(res)

          this.handleRelativesApi(handleParams).then(res => {
            console.log(res)
          })
        })
      }
    },
    // 点击添加亲属触发事件
    addFamilyClick () {
      this.editArr.familyMembersArr.push({ id: '', name: '', relationCode: '', phone: '', userId: '' })
    },
    // 点击删除亲属触发事件
    deleteFamilyClick (e) {
      this.$confirm('是否解除亲属关系？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.editArr.familyMembersArr.splice(e, 1)
        this.$message({
          message: '删除成功',
          type: 'success'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '操作已取消'
        })
      })
    },
    // 解除微信绑定按钮触发事件
    unbindClick (e) {
     this.$confirm('是否解除该用户的微信绑定？', '提示', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
       type: 'warning'
     }).then(() => {
       this.unbindApi(e).then(res => {
         this.$message({
           message: '微信解绑成功',
           type: 'success'
         })
       })
     }).catch(() => {
       this.$message({
         type: 'info',
         message: '操作已取消'
       })
     })
    },
    // 亲属关系电话号码失去焦点时触发
    // phoneInput (e) {
    //   if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(e.phone))) {
    //     this.$message.error('手机号码格式错误')
    //     e.phone = ''
    //     return false
    //   }
    //   console.log(e)
    // },
    // 上传图片事件
    selectFile () {
      this.$refs.headFile.click()
    },
    changeFile (e) {
      this.$message('头像上传中，请稍候...')
      var file = e.target.files[0]
      COS.putObject(file).then(url => {
        this.editArr.dialogImageUrl = url
        console.log(url)
        this.$refs.headFile.value = ''
        this.$message({
          message: '上传成功',
          type: 'success'
        })
      })
    },
    // 学段下拉框值变动触发事件
    ChangedD () {
      let getLearn = {
				id: this.getSchoolId(),
				data: {
					Sorting: 'name DESC',
					StageId: this.editArr.studentshoolVal
				}
      }
      this.addLearnApi(getLearn).then(res => {
        this.sessionDataArr = res
      })
    },
    // 入学学级值变动触发事件
     async gradeChangeEntrance (e) {
      let params = {
        id: this.getSchoolId(),
        data: {
          PeriodId: this.editArr.studentSessionVal,
          StageId: this.editArr.studentshoolVal
        }
      }
      let val = await this.correspondingGradeApi(params)
      this.editArr.gradeIdDataVal = val.id

      this.editArr.studentClassVal = ''
      let allClass = {
        id: this.getSchoolId(),
        data: {
          Sorting: 'orderNum',
          GradeId: this.editArr.gradeIdDataVal
        }
      }
      let value = await this.addStudentApi(allClass)
      this.classDataArr = value
    },
    // 获取  全部学生，筛选学生请求封装
    allStudentData () {
      // 获取全部班级
      // let allClass = {
      //   id: this.getSchoolId(),
      //   data: {
      //     Sorting: 'orderNum'
      //   }
      // }
      // this.addStudentApi(allClass).then(res => {
      //   this.classDataArr = res
      // })

      // 获取全部年级
      let getGrade = {
        Sorting: 'orderNum',
        schoolId: this.getSchoolId()
      }
      
      this.getAllGradeApi(getGrade).then(res => {
        this.gradeIdData = res
        console.log(res)
      })

      // 获取全部学届（ 学级 ）
      console.log(this.getSchoolId())
      let getLearn = {
				id: this.getSchoolId(),
				data: {
					Sorting: 'name DESC'
				}
      }
      this.addLearnApi(getLearn).then(res => {
        if (!this.individualStudent) {
          this.sessionDataArr = []
        } else {
          this.sessionDataArr = res
        }
      })

      // 获取全部学段
      this.allSectionsApi(this.getSchoolId()).then(res => {
        this.learningSectionDataArr = res
      })
    },
    // 单独获取所有班级请求封装
    aloneGetClass () {
      let allClass = {
        id: this.getSchoolId(),
        data: {
          Sorting: 'orderNum'
        }
      }

      this.addStudentApi(allClass).then(res => {
        this.classDataArr = res
      })
    },
    // 弹窗取消按钮事件
    editCancelClick () {
      this.classDataArr = []
      Object.assign(this.$data.editArr, this.$options.data().editArr)
      this.$emit('changeBigPopup', false)
    },
    // 分页页码改变触发事件
    pageChange (e) {
      this.pagingData.pageNum = e
      this.stateChange()
    },
    stateFormat (row, column) {
      for (let i of this.allTypeChange) {
        if (row.type == i.id) {
          return i.name
        }
      }
    },
    // 进入组件触发的事件
    open () {
      this.allStudentData()
      this.activeName = 'first'
      this.documentTypeDataArr = this.documentTypeDataArrS
      this.nationDataArr = this.nationDataArrS
      this.healthyDataArr = this.healthyDataArrS
      this.entranceDataArr = this.entranceDataArrS
      this.residenceTypeDataArr = this.residenceTypeDataArrS
      this.politicalOutlookDataArr = this.politicalOutlookDataArrS
      this.admissionModeDataArr = this.admissionModeDataArrS
      this.modeOfStudyDataArr = this.modeOfStudyDataArrS
      this.disabilityTypeDataArr = this.disabilityTypeDataArrS
      this.onDutyDataArr = this.onDutyDataArrS
      this.modeOfTransportationDataArr = this.modeOfTransportationDataArrS
      this.relativesDataArr = this.relativesDataArrS
      this.oCCompatriotsDataArr = this.oCCompatriotsDataArrS
      if (!this.individualStudent) {
        Object.assign(this.$data.editArr, this.$options.data().editArr)
      }
    },
    // 学籍变动状态列表请求封装
    stateChange () {
      let params = {
        id: this.individualStudent.loginUserId,
        data: {
          PageNum: this.pagingData.pageNum,
          PageSize: this.pagingData.pageSize
        }
      }
      this.changeRecordApi(params).then(res => {
        console.log(res)
        this.pagingData.pageAllNum = res.totalCount
        this.tableData = res.items
      })
    }
  },
  watch: {
    // 监听用户点击的学生 （ 为空就代表新增过来的 ）
    individualStudentObj (newName, oldName) {
      console.log(newName)
      let res = newName
      this.deletePersonalData = res
      let val = this.editArr
      if (!this.individualStudent) {
        this.judgingHistory = false
        this.tableData = []
        this.editorBlockedData = false
        this.judgeNew = 1
        Object.assign(this.$data.editArr, this.$options.data().editArr)
      } else {
        this.stateChange()
        this.aloneGetClass()
        this.judgingHistory = true
        this.editorBlockedData = true
        this.judgeNew = 2
        val.studentNameVal = res.name
        val.studentGenderVal = res.gender
        val.studentshoolVal = res.stageId
        val.studentSessionVal = res.schoolPeriodId
        val.studentDocumentVal = res.idNumber
        val.studentLearnVal = res.studentCode
        val.studentStatusValue = res.status
        val.gradeIdDataVal = res.gradeId
        val.studentClassVal = res.classId
        res.parentList.length > 0 ? val.familyMembersArr = res.parentList : val.familyMembersArr = val.familyMembersArr
        val.studentAddressVal = res.familyAddress
        val.studentDateVal = res.enrolmentDate
        val.studentDocumentTypeVal = res.idTypeCode
        // 个人信息
        val.namePinYin = res.namePingYin
        val.auxiliaryNumber = res.auxStudentCode
        val.studentNumber = res.studentNum
        val.politicalOutlook = res.politicalStatusCode
        val.signName = res.loginName
        val.nativePlace = res.nativePlace
        val.dateOfBirth = res.birthDate
        val.birthplace = res.birthPlace
        val.nameMingZu = res.nationCode
        val.nationality = res.nationality
        val.health = res.healthStatusCode
        val.admissionMode = res.enrolmentModeCode
        val.registeredResidence = res.householdRegPlace
        val.hKNature = res.householdRegTypeCode
        val.postalCode = res.postalCode
        val.currentResidence = res.residentAddress
        val.postalAddress = res.commAddress
        val.personalHomepage = res.homePageUrl
        val.contactNumberData = res.contactPhoneNum
        val.mailBox = res.email
        val.specialtyData = res.specialSkill
        !res.idValidBeginDate ? val.theCertificateIsValid = [] : val.theCertificateIsValid.push(res.idValidBeginDate)
        !res.idValidEndDate ? val.theCertificateIsValid = [] : val.theCertificateIsValid.push(res.idValidEndDate)
        val.oCCompatriots = res.alienCode
        // 拓展信息
        val.sourceOfStudents = res.studentSourceCode
        val.modeOfStudy = res.studyModeCode
        val.nameUsedBefore = res.formerName
        val.onlyChild = res.onlyChildFlag
        val.preschoolEducation = res.preschoolEduFlag
        val.behindChildren = res.leftBehindChildFlag
        val.accompanyingChildren = res.migrantChildFlag
        val.orphanData = res.orphanFlag
        val.martyrData = res.martyrFlag
        val.governmentPurchases = res.govPayTuitionFlag
        val.applyForFunding = res.applyGovAidFlag
        val.aSupplement = res.subsidyFlag
        val.typesOfDisability = res.disabilityTypeCode
        val.onDuty = res.followStudyTypeCode
        val.distanceData = res.schoolDistance
        val.modeOfTransportation = res.transportModeCode
        val.schoolBus = res.takeSchoolbusFlag
        val.graduationData = res.graduateFlag
        val.dialogImageUrl = res.portraitImgUrl
      }
    }
  },
  mounted () {
    this.allStudentData()
  }
}
</script>

<style scoped lang="less">
.marginLeft {
  margin-left: 50px;
}

.horizontalBar {
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  input {
    width: 120px;
    height: 30px;
    border: 1px solid #e2e2e2;
    border-radius: 3px;
    padding-left: 10px;
  }
}

.text {
  color: #0362FD;
  cursor: pointer;
}

.flex {
  display: flex;
  align-items: center;
}

.widthCss {
  width: 940px;
  margin-left: 30px;
}

.elSelect {
  width: 150px;
  margin-right: 55px;
}

.imgCss {
  width: 25px;
  height: 25px;
  margin-right: 120px;
}

.imgCss2 {
  width: 23px;
  height: 23px;
  margin-right: 12px;
}

.el-dialog__body {
  padding: 30px 40px;
}

.textCss {
  color: #0074D9;
  font-size: 13px;
  margin-right: 10px;
  cursor:pointer;
}

</style>
<style>
.el-table th.is-leaf, .el-table td {
  text-align: center;
}
.el-table--border th {
  background: #f6f6fd;
  font-weight: 900;
  color: #000;
}
.el-dialog__body {
  padding: 30px 40px;
}
</style>
